<!-- 打卡页面  -->
<template>
  <div style="max-width: 750px; margin: 0 auto">
    <div class="big_box" style="max-width: 750px; margin: 0 auto">
      <!-- 上部分 开始 -->
      <van-notice-bar
        scrollable
        left-icon="volume-o"
        text="公告公告公告公告公告公告公告公告公告"
      />
      <div class="big_box_top">日期时间: {{ time }}</div>
      <div class="big_box_top">物流号+商品名称</div>
      <div class="big_box_top">
        <!-- <van-button type="info" style="margin-left: 10px" @click="check"
          >查单</van-button
        > -->
        <!-- <van-button type="info" style="margin-left: 10px">暂存</van-button> -->
        <van-button type="info" style="margin-left: 10px" @click="changeShow"
          >上传</van-button
        >
      </div>
    </div>
    <van-popup v-model="show" @close="cancel" :style="{ width: '90%' }">
      <div style="padding: 20px">
        <el-select v-model="from.logistics_company" placeholder="请选择物流所属公司">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.company_name"
            :value="item.id">
          </el-option>
        </el-select>
        <van-field
          v-model="from.logistics_number"
          label="物流号"
          placeholder="请输入物流号"
        />
        <van-field
          v-model="from.commodity_name"
          label="商品名称"
          placeholder="请输入商品名称"
        />
        <van-field
          v-model="from.real_count"
          type="number"
          label="实际数量"
          placeholder="请输入实际数量"
        />
        <el-upload 
          action="https://toys.yjinzi.com/api/common/file" 
          :file-list="from.commodity_images" 
          list-type="picture-card" 
          style="font-size: 108px;"
          :on-success="onSuccess">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file, index }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <!-- <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span> -->
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <!-- <van-uploader v-model="from.commodity_images" :after-read="afterRead" /> -->
        <!-- 到货时间 -->
        <!-- <van-field
          v-model="from.arrive_time"
          label="到货时间"
          :readonly="true"
          @focus="showDate = true"
          placeholder="请选择到货时间"
        />
        <van-datetime-picker
          v-model="from.date"
          type="date"
          v-show="showDate"
          @confirm="confirmDate"
          @cancel="showDate = false"
        /> -->
        <div style="display: flex;justify-content: end;">
          <van-button size="small" style="margin-right: 10px;" @click="cancel">取消</van-button>
          <van-button size="small" style="margin-right: 10px;" @click="workingArea">暂存</van-button>
          <van-button type="primary" size="small" @click="submit">确认</van-button>
        </div>
      </div>
      
    </van-popup>
  </div>
</template>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
// import Mixin from "./clockin";
// import clockinMixin from "./clockinMixin";
export default {
  name: "clockInView",
  components: {
    /** popup 弹出框 */
    // popup: () => import('./popupView.vue')
  },
  // mixins: [Mixin, clockinMixin],
  data() {
    return {
      time: "", // 当前时间
      show: false,
      from: {
        logistics_company: "",
        logistics_number: "",
        commodity_name: "",
        real_count: "",
        commodity_images: [],
        arrive_time: "",
        date: new Date(),
      },
      showDate: false,
      disabled: false,
      options: []
    };
  },
  mounted() {
    this.getTime();
    this.getLogisticsCompany()
  },
  watch: {
    show: {
      handler(val) {
        if (val) {
          let formList = JSON.parse(localStorage.getItem('fromList'))
          if (formList) {
            this.from = JSON.parse(JSON.stringify(formList))
          }
        }
      }
    }
  },
  methods: {
    async getLogisticsCompany() {
      let res = await this.$api.getLogisticsCompany({
        page: 1,
        pageSize: 1000
      })
      console.log(res);
      this.options = res.items
    },
    // 暂存
    workingArea() {
      localStorage.setItem('fromList', JSON.stringify(this.from))
      this.cancel()
    },
    async submit() {
      try {
        if (this.from.logistics_company === "") {
          return this.$notify({ type: 'danger', message: '请选择物流所属公司' });
        }
        if (this.from.logistics_number === "") {
          return this.$notify({ type: 'danger', message: '请输入物流号' });
        }
        if (this.from.commodity_name === "") {
          return this.$notify({ type: 'danger', message: '请输入商品名称' });
        }
        if (this.from.real_count === "") {
          return this.$notify({ type: 'danger', message: '请输入实际数量' });
        }
        if (this.from.commodity_images.length === 0) {
          return this.$notify({ type: 'danger', message: '请上传图片' });
        }
        // if (this.from.arrive_time === "") {
        //   return this.$notify({ type: 'danger', message: '请选择到货时间' });
        // }
        let params = {
          logistics_company: +this.from.logistics_company,
          logistics_number: this.from.logistics_number,
          commodity_name: this.from.commodity_name,
          real_count: this.from.real_count,
          commodity_images: this.from.commodity_images.map(it => it.url),
          arrive_time: this.$moment().format("YYYY-MM-DD"),
        }
        let res = await this.$api.addCommodity(params)
        this.$notify({ type: 'success', message: '添加成功' });
        localStorage.removeItem('fromList')
        this.cancel()
      } catch (err) {
        this.$notify({ type: 'danger', message: err.message.toString() })
      }
    },
    // 取消
    cancel () {
      this.showDate = false
      this.show = false
      this.from = {
        logistics_company: "",
        logistics_number: "",
        commodity_name: "",
        real_count: "",
        commodity_images: [],
        arrive_time: "",
        date: new Date(),
      }
    },
    onSuccess(res) {
      this.from.commodity_images.push({
        uid: new Date().getTime(),
        url: res.data.download_url
      })
    },
    handleRemove(file) {
      let index = this.from.commodity_images.findIndex(it => it.url === file.url)
      this.from.commodity_images.splice(index, 1)
    },
    // 选择时间
    confirmDate(val) {
      this.from.arrive_time = this.$moment(val).format('YYYY-MM-DD');
      this.showDate = false;
    },
    // 上传
    changeShow() {
      this.show = true;
    },
    // 去往搜索
    search() {
      this.$router.push("/searchView");
    },
    // 去往查单
    check() {
      this.$router.push("/checkTheIst");
    },
    // 获取当前时间
    getTime() {
      setInterval(() => {
        var date = new Date();

        // 年、月、日
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();

        // 时、分、秒
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        this.time =
          year +
          "-" +
          month +
          "-" +
          day +
          " " +
          hour +
          ":" +
          minute +
          ":" +
          second;
      }, 1000);
    },
  },
};
</script>
<style scoped >
.el-select {
  display: block !important;
}
::v-deep(.el-upload--picture-card) {
  height: 120px !important;
  width: 120px !important;
  line-height: 62px !important;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 80px !important;
  height: 80px !important;
}
::v-deep(.el-upload-list--picture-card) {
  flex-wrap: wrap;
  display: flex !important;
}
.van-uploader {
  display: block;
}
.big_box {
  width: 100%;
  background: url("https://s3.bmp.ovh/imgs/2023/02/27/072d644dbb04f591.png");
  background-size: 100% 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 0.3125rem;
  font-size: 0.15rem;
  color: #404040;
}
.big_box_top {
  padding-left: 10px;
  margin-top: 10px;
}
</style>
